import React, { memo, useEffect, useState } from 'react'
import { get, delOne, addOne, lookOne, gai } from './api/get'
import { Table, Radio, Modal, message, Input, Select, } from 'antd';
import axios from 'axios';
const App = memo(() => {
  //分页
  const [pagination, setpagination] = useState({})

  const [dataSource, setDataSource] = useState([])
  useEffect(() => {
    get().then(res => {
      setDataSource(res.data)
      setpagination({
        total: res.data.length,
        pageSize: 3
      })
    })
    axios.post('http://localhost:3000/login').then(res => {
      console.log(res);
    })
  }, [])

  const [visible, setVisible] = useState(false)

  const [nameT, setNameT] = useState('')
  const [ageT, setAgeT] = useState('')
  const [adT, setAdT] = useState('')

  const [look, setLook] = useState(false)
  // 查找返回的数据 
  const [lookData, setLookData] = useState({})
  // 修改数据的显隐效果
  const [xiu, setXiu] = useState(false)
  // 修改的时候存储的id
  const [xiuId, setXiuid] = useState()
  // 修改回显的内容
  const [xiuName, setXiuname] = useState()
  const [xiuAge, setXiuage] = useState()
  const [xiuAid, setXiuAid] = useState()
  // 弹窗框

  const { confirm } = Modal;
  const columns = [
    {
      title: '名字',
      dataIndex: 'name',
      key: 'name',
      render: text => <p>{text}</p>,
    },
    {
      title: '年龄',
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: '描述',
      dataIndex: 'address',
      key: 'address',
    },
    {
      title: '时间',
      dataIndex: 'key',
      key: 'key',
      render: text => <p>{new Date(text).toLocaleString()}</p>,
    },
    {
      title: '操作',
      key: 'action',
      render: (text, record) => (
        <span>
          <Radio.Button value="large" onClick={() => xiuOne(record.id)}>编辑</Radio.Button>
          <Radio.Button value="large" onClick={() => { getLook(record.id) }}>查看</Radio.Button>
          <Radio.Button value="large" onClick={() => del(record.id)}>删除</Radio.Button>
        </span>
      ),
    },
  ];
  // 删除一项的方法 
  const del = (id) => {
    confirm({
      title: '确定要删除吗?',
      content: '一旦删除，将无法恢复！',
      okText: '确定',
      cancelText: '取消',
      async onOk() {
        await delOne(id)

        get().then(res => {
          setDataSource(res.data)
          setpagination({
            total: res.data.length,
            pageSize: 3
          })
        })
        message.success('删除成功');
      },
      onCancel() {
        message.warning('已取消');
      },
    });
  }
  // 添加一项的方法
  const add = async () => {
    let obj = {
      "id": new Date().getTime(),
      "name": nameT,
      "age": ageT,
      "address": adT,
      "tags": [
        "nice"
      ],
      "key": new Date().getTime()
    }
    await addOne(obj)
    // get().then(res => {
    //   setDataSource(res.data)
    //   setVisible(false)
    // })
    get().then(res => {
      setDataSource(res.data)
      setVisible(false)
      setpagination({
        total: res.data.length,
        pageSize: 3
      })
    })
    message.success('添加成功');
  }
  // 查看数据的方法‘
  function getLook(id) {
    setLook(true)

    lookOne(id).then((res) => {
      setLookData(res.data)
    })
  }
  // 修改数据回显的方法
  function xiuOne(id) {
    setXiu(true)
    setXiuid(id)
    lookOne(id).then((res) => {
      setXiuname(res.data.name)
      setXiuage(res.data.age)
      setXiuAid(res.data.address)
    })
  }
  // 点击确定修改时候的方法
  const getXiu = async () => {
    let obj = {
      "name": xiuName,
      "age": xiuAge,
      "address": xiuAid,
    }
    await gai(xiuId, obj)
    get().then(res => {
      setDataSource(res.data)
    })
    setXiu(false)
    message.success('修改成功');
  }
  // 封装自定义价格的组件 
  function SelectorInput(props) {
    const { value = ['', ''] } = props
    const [currentValue, setCurrentValue] = useState(value)
    // 下拉菜单的单选项
    const { Option } = Select;
    // input输入框内容发生改变时触发的回调
    const fromChange = (v) => {
      const newValue = [v, currentValue[1]]
      setCurrentValue(newValue)
    }
    // 下拉菜单内容发生改变时触发的回调
    const toChange = (e) => {
      if (e === '美元') {
        const newValue = [Number(currentValue[0]) * 7.2, e]
        console.log(newValue);
      } else if (e === '人民币') {
        const neValue = [Number(currentValue[0]), e]
        console.log(neValue);
        setCurrentValue(neValue)
      }
    }
    return (
      <>
        <Input size="large" placeholder="请输入价格" style={{ width: 200, height: 30 }} onChange={(e) => fromChange(e.target.value)} />
        <Select defaultValue="请选择币种" style={{ width: 120 }} onChange={(e) => toChange(e)}>
          <Option value="人民币">人民币</Option>
          <Option value="美元">美元</Option>
        </Select>
      </>
    )
  }
  return (
    <div>
      <button onClick={() => { setVisible(true) }}>添加</button>
      <SelectorInput></SelectorInput>
      <Table columns={columns} dataSource={dataSource} size='middle' pagination={pagination} />
      {/* 添加数据的弹出框 */}
      <Modal
        title="添加数据"
        visible={visible}
        onOk={() => add()}
        onCancel={() => { setVisible(false) }}
        okText="确认"
        cancelText="取消"
      >
        姓名<Input size="large" placeholder="请输入名字" value={nameT} onChange={(e) => { setNameT(e.target.value) }} />

        年龄<Input size="large" placeholder="请输入年龄" value={ageT} onChange={(e) => { setAgeT(e.target.value) }} />

        描述信息<Input size="large" placeholder="请输入描述内容" value={adT} onChange={(e) => { setAdT(e.target.value) }} />
      </Modal>
      {/* 查看数据的弹出框 */}
      <Modal
        title="查看数据"
        visible={look}
        onOk={() => setLook(false)}
        onCancel={() => { setLook(false) }}
        okText="确认"
        cancelText="取消"
      >
        姓名<Input size="large" placeholder="" value={lookData.name} />

        年龄<Input size="large" placeholder="" value={lookData.age} />

        描述信息<Input size="large" placeholder="" value={lookData.address} />
      </Modal>
      {/* 修改数据的弹窗框 */}
      <Modal
        title="修改数据"
        visible={xiu}
        onOk={() => getXiu()}
        onCancel={() => { setXiu(false) }}
        okText="修改"
        cancelText="取消"
      >
        姓名<Input size="large" placeholder="" value={xiuName} onChange={(e) => setXiuname(e.target.value)} />

        年龄<Input size="large" placeholder="" value={xiuAge} onChange={(e) => setXiuage(e.target.value)} />

        描述信息<Input size="large" placeholder="" value={xiuAid} onChange={(e) => setXiuAid(e.target.value)} />
      </Modal>
    </div>
  )
})

export default App


